<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>table</title>
  </head>
  <style>
    .tableHeight {
      max-height: 200px;
      overflow-y: scroll;
      border: 1px solid rgb(218, 217, 217);
      border-radius: 2px;
    }
    .tableHeight tbody tr:nth-child(1) {
      position: sticky;
      top: 0;
      border: 1px solid rgb(236, 10, 10);
    }
    .tableHeight tbody tr td {
      border-right: 1px solid rgb(218, 217, 217);
      border-bottom: 1px solid rgb(218, 217, 217);
    }
    .tableHeight tbody tr:nth-last-child(1) td {
      border-bottom: 0px solid rgb(218, 217, 217);
    }
    .tableHeight tbody::-webkit-scrollbar,
    .head-fixed-table1 tbody::-webkit-scrollbar,
    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 6px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 10px;
    }
 
    .tableHeight tbody::-webkit-scrollbar-thumb,
    .head-fixed-table1 tbody::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 6px;
      background-color: #ccc;
    }
 
    .tableHeight tbody::-webkit-scrollbar-track,
    .head-fixed-table1 tbody::-webkit-scrollbar-track,
    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(252, 249, 249, 0.2);
      background: #ededed;
      border-radius: 10px;
    }
  </style>
  <div class="tableHeight">
    <body>
      <table id="tb_1" cellspacing="0" cellpadding="0" width="100%">
        <tbody>
          <tr align="center" bgcolor="aliceblue">
            <td>11111111111111111111111111111111</td>
            <td>2222</td>
            <td>33333</td>
            <td>4444</td>
            <td>55555</td>
            <td>6666</td>
            <td>7777</td>
            <td>88888</td>
          </tr>
          <tr align="center">
            <td>20000011111111111111111111111111111111111</td>
            <td>1997-3-13</td>
            <td>1997-3-13</td>
            <td>1</td>
            <td>WZJ</td>
            <td>1965-3-13</td>
            <td>汉</td>
            <td>171</td>
          </tr>
          <tr align="center">
            <td>2000045</td>
            <td>2001-2-15吾问无为谓无无无无无无无无无无无无无无无无无无无无无无</td>
            <td>2001-3-15</td>
            <td>0</td>
            <td>WY</td>
            <td>1978-8-5</td>
            <td>汉</td>
            <td>162</td>
          </tr>
          <tr align="center">
            <td>2000046</td>
            <td>2001-2-23</td>
            <td>2001-3-23得到的得到的多多多多多多多多多多多多多多多多多</td>
            <td>0</td>
            <td>LQ</td>
            <td>2001-2-23</td>
            <td>汉</td>
            <td>171</td>
          </tr>
          <tr align="center">
            <td>2000045</td>
            <td>2001-2-15吾问无为谓无无无无无无无无无无无无无无无无无无无无无无</td>
            <td>2001-3-15</td>
            <td>0</td>
            <td>WY</td>
            <td>1978-8-5</td>
            <td>汉</td>
            <td>162</td>
          </tr>
          <tr align="center">
            <td>2000046</td>
            <td>2001-2-23</td>
            <td>2001-3-23得到的得到的多多多多多多多多多多多多多多多多多</td>
            <td>0</td>
            <td>LQ</td>
            <td>2001-2-23</td>
            <td>汉</td>
            <td>171</td>
          </tr>
          <tr align="center">
            <td>2000045</td>
            <td>2001-2-15吾问无为谓无无无无无无无无无无无无无无无无无无无无无无</td>
            <td>2001-3-15</td>
            <td>0</td>
            <td>WY</td>
            <td>1978-8-5</td>
            <td>汉</td>
            <td>162</td>
          </tr>
          <tr align="center">
            <td>2000046</td>
            <td>2001-2-23</td>
            <td>2001-3-23得到的得到的多多多多多多多多多多多多多多多多多</td>
            <td>0</td>
            <td>LQ</td>
            <td>2001-2-23</td>
            <td>汉</td>
            <td>171</td>
          </tr>
          <tr align="center">
            <td>2000045</td>
            <td>2001-2-15吾问无为谓无无无无无无无无无无无无无无无无无无无无无无</td>
            <td>2001-3-15</td>
            <td>0</td>
            <td>WY</td>
            <td>1978-8-5</td>
            <td>汉</td>
            <td>162</td>
          </tr>
          <tr align="center">
            <td>2000046</td>
            <td>2001-2-23</td>
            <td>2001-3-23得到的得到的多多多多多多多多多多多多多多多多多</td>
            <td>0</td>
            <td>LQ</td>
            <td>2001-2-23</td>
            <td>汉</td>
            <td>171</td>
          </tr>
          <tr align="center">
            <td>2000045</td>
            <td>2001-2-15吾问无为谓无无无无无无无无无无无无无无无无无无无无无无</td>
            <td>2001-3-15</td>
            <td>0</td>
            <td>WY</td>
            <td>1978-8-5</td>
            <td>汉</td>
            <td>162</td>
          </tr>
        </tbody>
      </table>
      <script type="text/javascript">
        var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
        var table = document.getElementById("tb_1");
        for (j = 0; j < table.rows[0].cells.length; j++) {
          table.rows[0].cells[j].onmousedown = function () {
            //记录单元格
            tTD = this;
            if (event.offsetX > tTD.offsetWidth - 10) {
              tTD.mouseDown = true;
              tTD.oldX = event.x;
              tTD.oldWidth = tTD.offsetWidth;
            }
            //记录Table宽度
            //table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;
            //tTD.tableWidth = table.offsetWidth;
          };
          table.rows[0].cells[j].onmouseup = function () {
            //结束宽度调整
            if (tTD == undefined) tTD = this;
            tTD.mouseDown = false;
            tTD.style.cursor = "default";
          };
          table.rows[0].cells[j].onmousemove = function () {
            //更改鼠标样式
            if (event.offsetX > this.offsetWidth - 10) this.style.cursor = "col-resize";
            else this.style.cursor = "default";
            //取出暂存的Table Cell
            if (tTD == undefined) tTD = this;
            //调整宽度
            if (tTD.mouseDown != null && tTD.mouseDown == true) {
              tTD.style.cursor = "default";
              if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
              //调整列宽
              tTD.style.width = tTD.width;
              tTD.style.cursor = "col-resize";
              //调整该列中的每个Cell
              table = tTD;
              while (table.tagName != "TABLE") table = table.parentElement;
              for (j = 0; j < table.rows.length; j++) {
                table.rows[j].cells[tTD.cellIndex].width = tTD.width;
              }
              //调整整个表
              //table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth);
              //table.style.width = table.width;
            }
          };
        }
      </script>
    </body>
  </div>
</html>